<template>
  <ElDrawer v-model="visible" :with-header="false">
    <div style="font-weight: 900">MODIFY</div>
    <ElForm label-width="120px">
      <ElFormItem label="CODE">
        <ElTag type="success">{{ bankMaterial.materialCode }} </ElTag>
      </ElFormItem>
      <ElFormItem label="BANK">
        <ElTag type="warning">{{ bankMaterial.bankCode }} </ElTag>
      </ElFormItem>
      <ElFormItem label="TITLE">
        <ElInput v-model="bankMaterial.title"></ElInput>
      </ElFormItem>
      <ElFormItem label="RATE">
        <ElInputNumber v-model="bankMaterial.rate" :precision="2" :step="0.01"></ElInputNumber>
        <span>%</span>
      </ElFormItem>
      <ElFormItem label="PERIOD">
        <ElInputNumber v-model="bankMaterial.period"></ElInputNumber>
      </ElFormItem>
      <ElFormItem label="UNIT">
        <ElSelect v-model="bankMaterial.unit">
          <ElOption label="年" value="year"></ElOption>
          <ElOption label="月" value="month"></ElOption>
          <ElOption label="日" value="day"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElButton @click="modify()" type="warning">SUBMIT</ElButton>
    </ElForm>
  </ElDrawer>
</template>
<script lang="ts" setup>
import * as fund from '@/apis/fund'
const visible = ref(false)
const bankMaterial = reactive({
  title: '太平行业优选M',
  rate: 1.06,
  period: 4,
  unit: 'year',

  bankCode: 'AppleBank',
  version: 0,
  updateTime: '2023-09-25T16:17:07',
  fundTimes: 0,
  materialCode: 'DK20230925000012'
})
const show = (data: any) => {
  visible.value = true
  Object.assign(bankMaterial, data)
}
defineExpose({
  show
})
const emit = defineEmits(['postModify'])
const modify = async () => {
  //   const res = await axios({
  //     url: 'http://localhost:9091/bankMaterial/modify',
  //     method: 'PUT',
  //     data: bankMaterial
  //   })
  const res = await fund.bankMaterialModify(bankMaterial)
  ElMessage.warning(' modify successfully ' + res.data.materialCode)
  ;(visible.value = false), emit('postModify', 1)
}
</script>
<style lang="scss" scoped>
.el-form {
  width: 500px;
  padding: 20px 50px;
  border: 1px rebeccapurple solid;
}
</style>
